<%--
  Created by IntelliJ IDEA.
  User: Procedure
  Date: 2017/5/16
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/template/common/taglibs.jspf" %>
<es:contentHeader/>
<title>头像上传</title>
<t:base type="cloudAdmin,fontAwesome,jquery,bootstrap,jqueryUI,animate,uniform,select2,datePicker,common,layer,jqueryValidate"></t:base>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/css/tdjkc.css"/>
<style type="text/css">
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>
<body>
<div id="div">
    <ul class="nav nav-tabs">
        <li ${param['deleted'] eq 'true' ? 'class="active"' : ''}>
            <a href="<%=request.getContextPath()%>/admin/sys/user/updatePassword">
                <i class="icon-table"></i>
                修改密码
            </a>
        </li>
        <!--style="float:right;width:10%"-->
        <li ${param['search.deleted_eq'] ne 'true' and param['search.status_eq'] ne 'blocked' ? 'class="active"' : ''}>
            <a href="<%=request.getContextPath()%>/admin/sys/user/uploadIcon">
                <i class="icon-table"></i>
                头像更换
            </a>
        </li>
    </ul>
    <es:showMessage/>
    <form method="post" id="myForm" action="<%=request.getContextPath()%>/admin/sys/user/uploadIcon"
          enctype="multipart/form-data">
        <input type="hidden" value="${user.id}" name="id" id="id">
        <table class="table table-bordered">
            <tr style="background-color: darkgrey; font-size: 12px">
                <td style="color: wheat;">用户头像上传</td>
            </tr>
            <tr style=" font-size: 12px">
                <td>
                    <a href="javascript:;" class="file">
                        选择一张图片
                        <input name="icon" type="file" id="uploadFile" multiple="multiple"
                               onchange="uploadImage(this)"/>
                    </a>
                    <div id='dd'><img width="200px" height="200px" src="${user.icon}" alt=""></div>
                </td>
            </tr>
            <tr style="font-size: 12px" align="left">
                <td colspan="2"><input type="button" class="btn btn-primary" value=" 确认更换" id="sub" onclick="subC()"/></td>
            </tr>
        </table>
        <div id="imgDiv">
        </div>
    </form>
</div>
<script type="text/javascript">
    function uploadImage(img) {
        var filesize = img.files[0].size / 1024;
        //判断是否有选择上传文件
        var imgPath = $("#uploadFile").val();
        if (imgPath == "") {
            layer.alert('请选择上传的图片！！', {
                icon: 2,
                skin: 'layer-ext-moon'
            });
            return;
        }
        if (filesize > 1024 * 5) {
            layer.alert('图片文件过大！！', {
                icon: 2,
                skin: 'layer-ext-moon'
            });
            $("#uploadFile").val("");
            $("#dd").html("");
            return;
        }
        //判断上传文件的后缀名
        var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
        if (strExtension != 'jpg' && strExtension != 'gif'
            && strExtension != 'png' && strExtension != 'bmp' && strExtension != 'jpeg') {
            layer.alert('请选择图片文件！！', {
                icon: 2,
                skin: 'layer-ext-moon'
            });
            $("#uploadFile").val("");
            $("#dd").html("");
            return;
        }

    }
    $(document).ready(function () {
        //当input值发生改变时
        $("#uploadFile").change(function () {
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
                reads(fil[i]);
            }
        });
    });
    //把图片放在DIV里面显示出来
    function reads(fil) {
        var reader = new FileReader();
        reader.readAsDataURL(fil);
        reader.onload = function () {
            document.getElementById("dd").innerHTML = "<img width='200px' height='200px' src='" + reader.result + "'>";
        };
    }
    function subC() {
        var imgPath = $("#uploadFile").val();
        if (imgPath == "") {
            layer.alert('请选择上传的图片！！', {
                icon: 2,
                skin: 'layer-ext-moon'
            });
        }
        else{
            $('#myForm').submit();
        }
    }
</script>
